<template>
  <div class="home">
    <Header :Searchval="Searchval" :Editval="Editval" style="position: fixed;" />
    <div class="box"></div>
    <!-- tab栏+内容滑动组件 -->
    <Banner :TabList="TabList" @changeTab="changeTab">
      <!-- 单个用户信息列表组件 -->
      <List slot="content" :ContentList="ContentList" />
    </Banner>
  </div>
</template>

<script>
import Banner from '../components/common/Banner.vue'
import List from '../components/common/List.vue'
import Header from '../components/common/Header.vue'
export default {
  components: { Banner, List, Header },
  data() {
    return {
      TabList: [],
      ContentList: [],
      // 控制搜索框的显示隐藏
      Searchval: true,
      // 控制编辑图标的显示隐藏
      Editval: true
    }
  },
  methods: {
    // 获取tab数据
    initTab() {
      this.$http.get('postclass').then((res) => {
        console.log(res)
        let status = res.status
        if (status === 200) {
          this.TabList = res.data.data.list
          console.log('tab', this.TabList)
        }
      })
    },
    // // 获取文章内容
    // initContent() {
    //   this.$http.get('postclass/1/post/1').then((res) => {
    //     console.log(res)
    //     let status = res.status
    //     res.data.data.list.map((item) => {
    //       // 如果有粉丝
    //       if (item.user.fens) {
    //         //  就循环每一项
    //         item.user.fens.forEach((fens) => {
    //           // 如果粉丝里面有一项是自己就把关注隐藏
    //           if (fens.id === 1679) {
    //             item.guanzhu = true
    //             // 没有则显示
    //           } else {
    //             item.guanzhu = false
    //           }
    //         })
    //         // 没有粉丝则显示
    //       } else {
    //         item.guanzhu = false
    //       }
    //     })
    //     if (status === 200) {
    //       this.ContentList = res.data.data.list
    //       console.log('ContentList', this.ContentList)
    //     }
    //   })
    // },
    changeTab(val) {
      console.log(val);
      this.$http.get(`postclass/${val}/post/1`).then((res) => {
        console.log(res)
        let status = res.status
        res.data.data.list.map((item) => {
          // 如果有粉丝
          if (item.user.fens) {
            //  就循环每一项
            item.user.fens.forEach((fens) => {
              // 如果粉丝里面有一项是自己就把关注隐藏
              if (fens.id === 1679) {
                item.guanzhu = true
                // 没有则显示
              } else {
                item.guanzhu = false
              }
            })
            // 没有粉丝则显示
          } else {
            item.guanzhu = false
          }
        })
        if (status === 200) {
          this.ContentList = res.data.data.list
          console.log('tab', this.ContentList)
        }
      })
    },
  },
  created() {
    this.initTab()
    this.changeTab(1)
  }
}
</script>
<style lang="scss" scoped>
$width: 100%;
$bg-color: red;

img {
  width: $width;
  height: 100%;
}

.home {
  position: relative;
  flex: 1;
}

.box {
  height: 44px;
  width: $width;
}
</style>
